
<!-- 商品分类层级最多为三层，level字段标识 -->
<template>
  <div class="component-container">
    <el-row>
      <el-col :span="12">
        <el-card style="width: 200%">
          <template #header>
            <svg-icon icon-class="menu" />
            品类信息
          </template>
          <el-form
            ref="form"
            :model="parentRow"
            :rules="rules"
            label-width="100px"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="品类名称" prop="name">
                  <el-input v-model="parentRow.name" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="品类状态" prop="status">
                  <el-select v-model="parentRow.status" disabled>
                    <el-option
                      v-for="dict in product_pattern_status"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="显示顺序" prop="num">
                  <el-input v-model="parentRow.num" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间" prop="createTime">
                  <el-input v-model="parentRow.createTime" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="更新时间" prop="updateTime">
                  <el-input v-model="parentRow.updateTime" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-card style="width: 200%">
          <template #header>
            <svg-icon icon-class="menu" />
            二级品类列表
            <el-button type="text"> 添加二级品类</el-button>
          </template>

          <el-row>
            <div class="item" v-for="item in genreList" :key="item.id">
              <el-col :span="24">
                <div>{{ item.name }}&nbsp;</div>

                <el-button type="text"> 修改</el-button>
                <el-button type="text"> 停用</el-button>
                <el-button type="text"> 删除</el-button>
              </el-col>
            </div>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Attribute">
import {
  loadTwoProductGenreList,
  getGenre,
  delGenre,
  addGenre,
  updateGenre,
} from "@/api/order/genre.js";
import { ref, watch } from "vue";
const props = defineProps({
  category: {
    type: Object,
    default: () => {
      return {
        genreId: null,
        name: "",
        status: "",
        num: "",
        createTime: "",
        updateTime: "",
      };
    },
  },
});
const { proxy } = getCurrentInstance();
const { product_pattern_status } = proxy.useDict("product_pattern_status");
import LabelBox from "./LabelBox.vue";
const data = reactive({
  // 遮罩层
  loading: true,
  // 表格数据
  genreList: [],
  // 是否显示弹出层
  open: false,
  parentRow: {},
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    genreId: null,
    companyId: null,
    name: null,
    parentId: null,
    STATUS: null,
    genrePath: null,
    LEVEL: null,
    FLOOR: null,
    NUM: null,
    MEMO: null,
    imagePath: null,
    createTime: null,
    createEmployeeId: null,
    updateTime: null,
    updateEmployeeId: null,
  },
  // 表单参数
  form: {},
  // 表单校验
  rules: {},
  dialog: {
    title: "",
    visible: false,
  },
});
const { loading, open, queryParams, form, rules, dialog, genreList } =
  toRefs(data);
const parentRow = ref({});

watch(
  () => props.category,
  (newVal, oldVal) => {
    
    // 检测参数变化
    console.log("Parameter changed:", newVal);
    // 更新页面信息
    parentRow.value = newVal;
    const { genreId } = newVal;

    getList(genreId);
  }
);

function getList(genreId) {
  if (typeof genreId !== "undefined") {
    loading.value = true;
    console.log("genreId changed:", genreId);

    // // queryParams.parentId.value =  parentRow.genreId;
    // queryParams.value = {...queryParams.value, parentId:genreId}
    loadTwoProductGenreList(genreId).then((response) => {
      genreList.value = response;
      loading.value = false;
    });
  }
}

function handleClick(row) {
  console.log("click event2");
}
getList();
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 980px;
}
.card {
  margin-bottom: 200px; /* 设置卡片之间的下边距 */
}
.item {
  width: calc(25% - 10px);
  margin-bottom: 10px;
  background-color: #f0f0f0;
  padding: 10px;
}
</style>
